﻿<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="utf-8">
    <meta name="description" content="bootstrap default admin template">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Accordions | Prince Admin Template</title>


    <!-- Start global css -->
    <link rel="stylesheet" href="../../assets/global/plugins/Waves/dist/waves.min.css"/>
    <link rel="stylesheet" href="../../assets/global/plugins/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../assets/icons_fonts/font-awesome/css/font-awesome.min.css"/>
    <!-- End global css -->

    <!-- Start page plugin css -->

    <!-- End page plugin css -->

    <!-- Start template global css -->
    <link href="../../assets/global/css/components.min.css" type="text/css" rel="stylesheet"/>
    <!-- End template global css -->

    <!-- Start layout css -->
    <link rel="stylesheet" href="../../assets/layouts/layouts_left_menu/left_menu_layout.min.css"/>
    <!-- End layout css -->

    <!-- Start favicon ico -->
    <link rel="icon" href="../../assets/favicon/prince.ico" type="image/x-icon"/>
    <link rel="icon" type="image/png" sizes="192x192" href="../../assets/favicon/prince-192x192.png">
    <link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/prince-180x180.png">
    <!-- End favicon ico -->

</head>
<body class="nav-medium">
<div class="container body">
    <div class="main_container">
        <!-- Start Loader -->
<div class="page-loader">
    <div class="preloader loading">
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
    </div>
</div>
<!-- End Loader -->

<!-- Start Scroll Top -->
<a href="javascript:" id="scroll" style="display: none;"><span></span></a>
<!-- End Scroll Top -->

<!-- start Left Menu-->
<div class="col-md-3 left_color">
    <div class="left_color scroll-view">
        <div class="navbar nav_title">
            <a href="index.html" class="medium-logo">
                <img src="../../assets/global/images/prince_logo.png" alt="medium-logo">
            </a>
            <a href="index.html" class="small-logo">
                <img src="../../assets/global/images/prince_logo2.png" alt="small-logo">
            </a>
        </div>

        <div class="clearfix"></div>

        <!-- sidebar menu -->
        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
                <h3>General</h3>
                <ul class="nav side-menu">
                    <li><a class="waves-effect waves-light" href="index.html"><i class="fa fa-home"></i> Dashboard</a></li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-desktop"></i>Basic UI Elements <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="accordions.html">Accordions</a></li>
                            <li> <a class="waves-effect waves-light" href="buttons.html">Buttons</a></li>
                            <li> <a class="waves-effect waves-light" href="dropdowns.html">Dropdowns</a></li>
                            <li> <a class="waves-effect waves-light" href="modals.html">Modals</a></li>
                            <li> <a class="waves-effect waves-light" href="modals_animation.html">Modals Animation</a></li>
                            <li><a class="waves-effect waves-light" href="list.html">List</a></li>
                            <li> <a class="waves-effect waves-light" href="progressbar.html">Progress bar</a></li>
                            <li> <a class="waves-effect waves-light" href="tabs.html">Tabs</a></li>
                            <li> <a class="waves-effect waves-light" href="typography.html">Typography</a></li>
                            <li> <a class="waves-effect waves-light" href="tooltip_popover.html">Tooltips & Popover</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-cube"></i>Advanced Elements <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="alerts.html">Alerts</a></li>
                            <li> <a class="waves-effect waves-light" href="custom_scroll.html">Custom scroll</a></li>
                            <li> <a class="waves-effect waves-light" href="timeline.html">Timeline</a></li>
                            <li> <a class="waves-effect waves-light" href="carousel.html">Carousel</a></li>
                        </ul>
                    </li>
                    <li><a  class="waves-effect waves-light"><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="general_elements.html">General Elements</a></li>
                            <li><a class="waves-effect waves-light" href="form_input.html">Form Input</a></li>
                            <li><a class="waves-effect waves-light" href="form_validation.html">Form Validation</a></li>
                            <li><a class="waves-effect waves-light" href="form_mask.html">Form Mask</a></li>
                            <li><a class="waves-effect waves-light" href="form_layouts.html">Form Layouts</a></li>
                            <li><a class="waves-effect waves-light" href="form_wizard.html">Form Wizard</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light" href="sweetalerts.html"><i class="fa fa-window-maximize"></i> Popups</a></li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="basic_table.html">Basic Table</a></li>
                            <li><a class="waves-effect waves-light" href="edit_table.html">Edit Table</a></li>
                            <li><a class="waves-effect waves-light" href="basic_datatable.html">Basic Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="advanced_datatable.html">Advanced Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="api_datatable.html">API Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="styling_datatable.html">Styling Datatable</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-bar-chart-o"></i> Charts <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="morris_chart.html">Morris Chart</a></li>
                            <li><a class="waves-effect waves-light" href="sparkline_chart.html">Sparkline Chart</a></li>
                            <li><a class="waves-effect waves-light" href="chartist_chart.html">Chartist</a></li>
                            <li><a class="waves-effect waves-light" href="chart_js.html">Chart.js</a></li>
                            <li><a class="waves-effect waves-light" href="easy_pie_chart.html">Easy Pie Chart</a></li>
                            <li><a class="waves-effect waves-light" href="rickshaw_chart.html">Rickshaw Chart</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="menu_section">
                <h3>Live On</h3>
                <ul class="nav side-menu">
                    <li><a class="waves-effect waves-light"><i class="fa fa-anchor"></i> Icons <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="font_awesome.html">Font awesome</a></li>
                            <li><a class="waves-effect waves-light" href="material_icon.html">Material icon</a></li>
                            <li><a class="waves-effect waves-light" href="themify_icon.html">Themify icon</a></li>
                            <li><a class="waves-effect waves-light" href="flag_icon.html">Flag icon</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-map-marker"></i> Maps <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="map-google.html">Google Maps</a></li>
                            <li><a class="waves-effect waves-light" href="map-vector.html">Vector Map</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-user-circle-o"></i> User Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="user_login_v1.html">Login 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_login_v2.html">Login 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_register_v1.html">Register 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_register_v2.html">Register 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_forgot_password_v1.html">Forgot 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_forgot_password_v2.html">Forgot 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_lockscreen_v1.html">Lockscreen 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_lockscreen_v2.html">Lockscreen 2</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-exclamation-circle"></i> Error Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="user_404.html">Error 404</a></li>
                            <li><a class="waves-effect waves-light" href="user_400.html">Error 400</a></li>
                            <li><a class="waves-effect waves-light" href="user_403.html">Error 403</a></li>
                            <li><a class="waves-effect waves-light" href="user_405.html">Error 405</a></li>
                            <li><a class="waves-effect waves-light" href="user_500.html">Error 500</a></li>
                            <li><a class="waves-effect waves-light" href="user_503.html">Error 503</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-balance-scale"></i> General Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="faq.html">FAQ</a></li>
                            <li><a class="waves-effect waves-light" href="userlist.html">User List</a></li>
                            <li><a class="waves-effect waves-light" href="invoice.html">Invoice</a></li>
                            <li><a class="waves-effect waves-light" href="blank.html">Blank</a></li>
                            <li><a class="waves-effect waves-light" href="profile.html">Profile</a></li>
                            <li><a class="waves-effect waves-light" href="gallery.html">Gallery</a></li>
                            <li><a class="waves-effect waves-light" href="maintenance.html">Maintenance</a></li>
                            <li><a class="waves-effect waves-light" href="draggable_grid.html">Draggable Grid</a></li>
                            <li><a class="waves-effect waves-light" href="grids.html">Grids</a></li>
                            <li><a class="waves-effect waves-light" href="search_results.html">Search result</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light" href="documentation.html"><i class="fa fa-cogs"></i> Documentation</a></li>
                </ul>
            </div>

        </div>
        <!-- /sidebar menu -->

        <!-- /menu footer buttons -->
        <div class="sidebar-footer hidden-small">
            <a data-toggle="tooltip" data-placement="top" title="Settings">
                <span class="fa fa-cog" aria-hidden="true"></span>
            </a>
            <a class="toggle-fullscreen" data-toggle="tooltip" data-placement="top" title="FullScreen">
                <span class="fa fa-arrows-alt" aria-hidden="true"></span>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="Lock">
                <span class="fa fa-lock" aria-hidden="true"></span>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
                <span class="fa fa-power-off" aria-hidden="true"></span>
            </a>
        </div>
        <!-- /menu footer buttons -->
    </div>
</div>
<!-- End Left Menu -->

<!-- start top navigation -->
<div class="top_nav">
    <div class="nav_menu">
        <nav>
            <div class="nav toggle">
                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
                <div class="responsive-logo">
                    <a href="index.html">
                        <img src="../../assets/global/images/prince_logo.png" alt="main-logo">
                    </a>
                </div>
            </div>

            <div class="topbar-right">
                <div class="nav navbar-nav navbar-right">

                    <div class="header-search right-icon">
                        <form role="search" class="search-box">
                            <input placeholder="Search..." class="form-control" type="text">
                            <a href="javascript:">
                                <i class="fa fa-search"></i>
                            </a>
                        </form>
                    </div>

                    <div class="dropdown header-notification right-icon">
                        <a href="javascript:" class="dropdown-toggle waves-effect waves-light notification-icon"
                           data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-bell-o" aria-hidden="true"></i>
                            <span class="label label-danger">4</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="text-center">
                                <p class="notification-title">Notification<span
                                            class="label label-primary">4</span></p>
                            </li>
                            <li class="list-group default-scroll">
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user1.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Domance Den</span> posted a photo on
                                                your wall.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user2.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Wikko Menta</span> commented on your
                                                last video.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user3.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Jonny Sem</span> posted 4 comments
                                                on your photo.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user4.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Doli Senga</span> posted a photo on
                                                your wall.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user5.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Bhura Kenta</span> commented on your
                                                last video.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user6.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Jolly Baby</span> posted 2 comments
                                                on your photo.</h5>
                                        </div>
                                    </div>
                                </a>

                            </li>
                            <li class="all-notification">
                                <a href="javascript:;" class="list-group-item text-right">
                                    <small>See all notifications</small>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="header-fullscreen right-icon">
                        <a href="javascript:" class="waves-effect waves-light toggle-fullscreen">
                            <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                        </a>
                    </div>

                    <!--<div class="header-chat right-icon">
                        <a href="javascript:" class="waves-effect waves-light">
                            <i class="fa fa-comments-o" aria-hidden="true"></i>
                        </a>
                    </div>-->

                    <div class="dropdown user-profile right-icon">
                        <a href="javascript:" class="dropdown-toggle waves-effect waves-light"
                           data-toggle="dropdown"
                           aria-expanded="false">
                            <img src="../../assets/global/images/user10.jpg" alt="user">
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-user" aria-hidden="true"></i>Profile</a>
                            </li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-cog" aria-hidden="true"></i>Settings</a>
                            </li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-lock" aria-hidden="true"></i>Lock screen</a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-power-off text-danger" aria-hidden="true"></i> Logout</a>
                            </li>
                        </ul>
                    </div>

                </div>

            </div>
        </nav>
    </div>
</div>
<div class="clearfix"></div>
<!-- End top navigation -->
    <!-- Start Contain Section -->
    <div class="container-fluid right_color">
        <div class="page-main-header">
            <!-- Page Title -->
            <h2 class="page-name-title">Accordions</h2>
            <!--  Breadcrumb -->
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li class="text-info">Components</li>
                <li class="active">Accordions</li>
            </ol>
        </div>

        <div class="contain-section">
            <div class="contain-inner-section">

                <div class="row">

                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Default accordions</h2>
                        </div>
                        <div class="section-body">
                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingOne">
                                        <h4 class="panel-title">
                                            <a role="button" data-toggle="collapse" data-parent="#accordion"
                                               href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                Collapsible Group Item #1
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                                         aria-labelledby="headingOne">
                                        <div class="panel-body">
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                                            ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
                                            parturient montes, nascetur ridiculus mus.
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingTwo">
                                        <h4 class="panel-title">
                                            <a class="collapsed" role="button" data-toggle="collapse"
                                               data-parent="#accordion" href="#collapseTwo" aria-expanded="false"
                                               aria-controls="collapseTwo">
                                                Collapsible Group Item #2
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"
                                         aria-labelledby="headingTwo">
                                        <div class="panel-body">
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                                            ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
                                            parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
                                            pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingThree">
                                        <h4 class="panel-title">
                                            <a class="collapsed" role="button" data-toggle="collapse"
                                               data-parent="#accordion" href="#collapseThree" aria-expanded="false"
                                               aria-controls="collapseThree">
                                                Collapsible Group Item #3
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel"
                                         aria-labelledby="headingThree">
                                        <div class="panel-body">
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                                            ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
                                            parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
                                            pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Border bottom tab</h2>
                        </div>
                        <div class="section-body">
                            <div class="accordion">
                                <div class="accordion-item">
                                    <a>Why is the moon sometimes out during the day?</a>
                                    <div class="content">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae
                                            et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <a>Why is the sky blue?</a>
                                    <div class="content">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae
                                            et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <a>Will we ever discover aliens?</a>
                                    <div class="content">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae
                                            et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <a>How much does the Earth weigh?</a>
                                    <div class="content">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae
                                            et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <a>How do airplanes stay up?</a>
                                    <div class="content">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae
                                            et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Accordion with rotating icon</h2>
                        </div>
                        <div class="section-body m-b-md-0">
                            <div class="panel-group wrap" id="accordion2" role="tablist" aria-multiselectable="true">
                                <div class="panel">
                                    <div class="panel-heading" role="tab" id="heading1">
                                        <h4 class="panel-title">
                                            <a role="button" data-toggle="collapse" data-parent="#accordion1"
                                               href="#collapse1" aria-expanded="true" aria-controls="collapse1">
                                                Collapsible item #1
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapse1" class="panel-collapse collapse in" role="tabpanel"
                                         aria-labelledby="heading1">
                                        <div class="panel-body">
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                                            ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
                                            parturient montes, nascetur ridiculus mus.
                                        </div>
                                    </div>
                                </div>

                                <div class="panel">
                                    <div class="panel-heading" role="tab" id="heading2">
                                        <h4 class="panel-title">
                                            <a class="collapsed" role="button" data-toggle="collapse"
                                               data-parent="#accordion2" href="#collapse2" aria-expanded="false"
                                               aria-controls="collapse2">
                                                Collapsible item #2
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapse2" class="panel-collapse collapse" role="tabpanel"
                                         aria-labelledby="heading2">
                                        <div class="panel-body">
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                                            ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
                                            parturient montes, nascetur ridiculus mus.
                                        </div>
                                    </div>
                                </div>

                                <div class="panel">
                                    <div class="panel-heading" role="tab" id="heading3">
                                        <h4 class="panel-title">
                                            <a class="collapsed" role="button" data-toggle="collapse"
                                               data-parent="#accordion3" href="#collapse3" aria-expanded="false"
                                               aria-controls="collapse3">
                                                Collapsible item #3
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapse3" class="panel-collapse collapse" role="tabpanel"
                                         aria-labelledby="heading3">
                                        <div class="panel-body">
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                                            ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
                                            parturient montes, nascetur ridiculus mus.
                                        </div>
                                    </div>
                                </div>

                                <div class="panel">
                                    <div class="panel-heading" role="tab" id="heading4">
                                        <h4 class="panel-title">
                                            <a class="collapsed" role="button" data-toggle="collapse"
                                               data-parent="#accordion4" href="#collapse4" aria-expanded="false"
                                               aria-controls="collapse4">
                                                Collapsible item #4
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapse4" class="panel-collapse collapse" role="tabpanel"
                                         aria-labelledby="heading4">
                                        <div class="panel-body">
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                                            ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
                                            parturient montes, nascetur ridiculus mus.
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Border Accordion </h2>
                        </div>
                        <div class="section-body m-b-0">

                            <div class="border-accordion">
                                <div class="panel-group wrap" id="accordion4" role="tablist"
                                     aria-multiselectable="true">
                                    <div class="panel">
                                        <div class="panel-heading" role="tab" id="heading41">
                                            <h4 class="panel-title">
                                                <a class="accordion-title" role="button" data-toggle="collapse"
                                                   data-parent="#accordion41" href="#collapse41" aria-expanded="true"
                                                   aria-controls="collapse41">
                                                    Collapsible item #1
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapse41" class="panel-collapse collapse in" role="tabpanel"
                                             aria-labelledby="heading41">
                                            <div class="panel-body">
                                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                                                ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
                                                dis parturient montes, nascetur ridiculus mus.
                                            </div>
                                        </div>
                                    </div>

                                    <div class="panel">
                                        <div class="panel-heading" role="tab" id="heading42">
                                            <h4 class="panel-title">
                                                <a class="collapsed" role="button" data-toggle="collapse"
                                                   data-parent="#accordion42" href="#collapse42" aria-expanded="false"
                                                   aria-controls="collapse42">
                                                    Collapsible item #2
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapse42" class="panel-collapse collapse" role="tabpanel"
                                             aria-labelledby="heading42">
                                            <div class="panel-body">
                                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                                                ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
                                                dis parturient montes, nascetur ridiculus mus.
                                            </div>
                                        </div>
                                    </div>

                                    <div class="panel">
                                        <div class="panel-heading" role="tab" id="heading43">
                                            <h4 class="panel-title">
                                                <a class="collapsed" role="button" data-toggle="collapse"
                                                   data-parent="#accordion43" href="#collapse43" aria-expanded="false"
                                                   aria-controls="collapse43">
                                                    Collapsible item #3
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapse43" class="panel-collapse collapse" role="tabpanel"
                                             aria-labelledby="heading43">
                                            <div class="panel-body">
                                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                                                ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
                                                dis parturient montes, nascetur ridiculus mus.
                                            </div>
                                        </div>
                                    </div>

                                    <div class="panel">
                                        <div class="panel-heading" role="tab" id="heading44">
                                            <h4 class="panel-title">
                                                <a class="collapsed" role="button" data-toggle="collapse"
                                                   data-parent="#accordion44" href="#collapse44" aria-expanded="false"
                                                   aria-controls="collapse44">
                                                    Collapsible item #4
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapse44" class="panel-collapse collapse" role="tabpanel"
                                             aria-labelledby="heading44">
                                            <div class="panel-body">
                                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                                                ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
                                                dis parturient montes, nascetur ridiculus mus.
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
    <!-- End Contain Section -->    <!-- Start Footer Section -->    <footer class="footer">        © 2018 All rights reserved. Template designed by <a class="text-primary" href="http://www.bootstrapmb.com/">Prince</a>    </footer>    <!-- End Footer Section -->
</div>
</div>

<!-- Start core js -->
<script src="../../assets/global/plugins/jquery/dist/jquery.min.js"></script>
<script src="../../assets/global/plugins/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../assets/global/plugins/Waves/dist/waves.min.js"></script>
<script src="../../assets/global/plugins/screenfull.js/dist/screenfull.min.js"></script>
<script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<!-- Start core javascript -->

<!-- Start global js -->
<script src="../../assets/global/js/left-menu.min.js"></script>
<!-- End global js -->

<!-- Start page plugin js -->

<!-- End page plugin js -->

<!-- Start page js -->
<script src="../../assets/global/js/accordions.min.js"></script>
<!-- End page js -->


</body>
</html>